



<template>
    <div class="demand-detail">
        <a-modal width="1200px" :visible="visible" title="患者信息" @cancel="closeModal" class="yuan-modal patient-detail-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData"
                    :label-col="{ style: { width: '150px' } }" :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                    <div class="form-panel yuan-form-col3">
                        <div class="form-panel-box">
                            <div class="form-title">基础信息</div>

                            <a-form-model-item class="yuan-form-item" label="患者姓名">
                                <span class="yuan-form-input">{{formData.patientName}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="性别">
                                <span class="yuan-form-input">{{formData.gender}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="年龄">
                                <span class="yuan-form-input">{{formData.age}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="诊号">
                                <span class="yuan-form-input">{{formData.consultationNumber}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="来源">
                                <span class="yuan-form-input">{{formData.source}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="门店名称">
                                <span class="yuan-form-input">{{formData.consultationDate}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="手机号">
                                <span class="yuan-form-input">{{formData.phone}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="累计消费金额">
                                <span class="yuan-form-input">{{$toYuan(formData.consumptionAmount)}}</span>
                            </a-form-model-item>

                        </div>
                        <div class="form-panel-box">
                            <div class="form-title">就诊信息</div>
                            <a-tabs type="card" :default-active-key="rawTypeKey" @change="tabChange" v-if="visible">
                                <a-tab-pane key="medical" tab="就诊记录"></a-tab-pane>
                                <a-tab-pane key="consumption" tab="消费记录"></a-tab-pane>
                            </a-tabs>
                            <div class="table">
                                <a-table bordered :rowKey="item=>item.id" :data-source="medicalList" :columns="medicalcolumns"
                                    :pagination="false" :loading="saveLoading" v-show="rawTypeKey==='medical'">
                                </a-table>

                                <div v-show="rawTypeKey==='consumption'">
                                    <div class="table-top">
                                        <span class="table-title">门店消费记录</span>
                                        <span class="table-total">累计消费：{{$toYuan(medicalTotal)}}</span>
                                    </div>
                                    <a-table bordered :rowKey="item=>item.id" :data-source="medicalList"
                                        :columns="medicalcolumns1" :pagination="false" :loading="saveLoading">
                                    </a-table>
                                    <div class="table-top">
                                        <span class="table-title">小程序消费记录</span>
                                        <span class="table-total">累计消费：{{$toYuan(consumptionTotal)}}</span>
                                    </div>
                                    <a-table bordered :rowKey="item=>item.id" :data-source="consumptionList"
                                        :columns="consumptioncolumns" :pagination="false" :loading="saveLoading">
                                    </a-table>
                                </div>

                            </div>

                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button @click="closeModal">
                    关闭
                </a-button>

            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { format, toYuan } from "@/utils";
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: "" }) editInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.rawTypeKey = "medical";
            if (this.editInfo && this.editInfo.vo.id) {
                this.formData = {
                    ...this.editInfo.vo,
                };
                let medicalTotal=0
                this.editInfo.clinicRecordS.forEach((item)=>{
                    medicalTotal+=item.consumptionAmount
                })
                let consumptionTotal=0
                this.editInfo.consumerRecordS.forEach((item)=>{
                    consumptionTotal+=item.paymentPrice
                })
                
                this.medicalList = this.editInfo.clinicRecordS;
                this.consumptionList = this.editInfo.consumerRecordS;
                this.medicalTotal=medicalTotal
                this.consumptionTotal=consumptionTotal
            } else {
                this.formData = {};
            }
        } else {
            this.formData = {};
        }
    }
    medicalTotal=0
    medicalList = [];
    consumptionTotal=0
    consumptionList = [];
    rawTypeKey = "medical";
    saveLoading = false;
    formData: any = {};

    async mounted() {}
    closeModal() {
        this.formData = {};
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }

    async modalOk() {}
    tabChange(e: string) {
        this.rawTypeKey = e;
    }

    medicalcolumns = [
        {
            align: "center",
            dataIndex: "visitTime",
            key: "visitTime",
            title: "就诊时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.visitTime);
            },
        },
        {
            align: "center",
            dataIndex: "source",
            key: "source",
            title: "开单来源",
        },
        {
            align: "center",
            dataIndex: "visitType",
            key: "visitType",
            title: "初复诊",
        },
        {
            align: "center",
            dataIndex: "department",
            key: "department",
            title: "科室",
        },
        {
            align: "center",
            dataIndex: "diagnosisResult",
            key: "diagnosisResult",
            title: "诊断",
        },
    ];
    medicalcolumns1 = [
        {
            align: "center",
            dataIndex: "visitTime",
            key: "visitTime",
            title: "就诊时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.visitTime);
            },
        },
        {
            align: "center",
            dataIndex: "source",
            key: "source",
            title: "开单来源",
        },
        {
            align: "center",
            dataIndex: "visitType",
            key: "visitType",
            title: "初复诊",
        },
        {
            align: "center",
            dataIndex: "payType",
            key: "payType",
            title: "类型",
            customRender: (text: string, record: any, index: number) => {
                return record.consumptionAmount > 0 ? "收费" : "退费";
            },
        },
        {
            align: "center",
            dataIndex: "consumptionAmount",
            key: "consumptionAmount",
            title: "实收",
            customRender: (text: string, record: any, index: number) => {
                return toYuan(record.consumptionAmount);
            },
        },
        {
            align: "center",
            dataIndex: "payWay",
            key: "payWay",
            title: "支付方式",
        },
    ];
    consumptioncolumns = [
        {
            align: "center",
            dataIndex: "paymentTime",
            key: "paymentTime",
            title: "消费时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.paymentTime);
            },
        },
        {
            align: "center",
            dataIndex: "type",
            key: "type",
            title: "项目",
            customRender: (text: string, record: any, index: number) => {
                return record.type === "GOODS" ? "商品购买" : "医生咨询";
            },
        },
        {
            align: "center",
            dataIndex: "goodsSummary",
            key: "goodsSummary",
            title: "商品名称/规格",
        },
        {
            align: "center",
            dataIndex: "totalAmount",
            key: "totalAmount",
            title: "消费金额",
            customRender: (text: string, record: any, index: number) => {
                return toYuan(record.totalAmount);
            },
        },
        {
            align: "center",
            dataIndex: "discountAmount",
            key: "discountAmount",
            title: "优惠券金额",
            customRender: (text: string, record: any, index: number) => {
                return toYuan(record.discountAmount);
            },
        },
        {
            align: "center",
            dataIndex: "paymentPrice",
            key: "paymentPrice",
            title: "实际付款",
            customRender: (text: string, record: any, index: number) => {
                return toYuan(record.paymentPrice);
            },
        },
    ];
}
</script>
<style lang="scss">
.patient-detail-modal {
    .table-top{
        font-size: 16px;
        color: #333;
        padding: 10px 0;
        margin-top: 10px;
    }
    .table-total{
        margin-left: 20px;
        font-size: 14px;
        color: #666;
    }
}
</style>

